<template>
  <div class="ce">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
        style="display: flex; justify-content: space-between"
      >
        <el-form label-width="60px" style="width: 400px">
          <el-form-item label="查询">
            <el-input v-model="searchobj" placeholder="输入ID">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="selectch"
              ></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <dir>
          <el-button type="primary" @click="addtype">添加商品分类</el-button>
        </dir>
      </div>
      <div class="text item">
        <el-table
          :data="tableList"
          row-key="cat_id"
          height="600px"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column label="分类名称">
            <template slot-scope="{ row }">
              {{ row.cat_name }}
            </template>
          </el-table-column>
          <el-table-column prop="cat_deleted" label="是否有效">
            <template slot-scope="{ row }">
              <!--    -->
              <i
                :style="{ color: row.cat_deleted ? 'green' : 'red' }"
                :class="row.cat_deleted ? 'el-icon-success' : 'el-icon-error'"
              ></i>
            </template>
          </el-table-column>
          <el-table-column label="分类当前层级">
            <template slot-scope="{ row }">
              <el-tag
                :type="
                  row.cat_level == 0
                    ? ''
                    : row.cat_level == 1
                    ? 'success'
                    : 'warning'
                "
                >{{
                  row.cat_level == 0
                    ? "一级"
                    : row.cat_level == 1
                    ? "二级"
                    : "三级"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="primary" @click="bianji(row)">编辑</el-button>
              <el-button type="danger" @click="del(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加 -->
        <el-dialog title="提示" :visible.sync="addVisible" width="30%">
          <el-form :model="addObj" label-width="80px">
            <el-form-item label="分类名称">
              <el-input v-model="addObj.cat_name"></el-input>
            </el-form-item>
            <el-form-item label=" 分类父 ID">
              <el-select v-model="addObj.cat_pid" placeholder="分类父 ID">
                <el-option label="一级" value="0"></el-option>
                <el-option label="二级" value="1"></el-option>
                <el-option label="三级" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="分类层级">
              <el-select v-model="addObj.cat_level" placeholder="分类层级">
                <el-option label="一级" value="0"></el-option>
                <el-option label="二级" value="1"></el-option>
                <el-option label="三级" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="addsure">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog title="提示" :visible.sync="bianjiVisible" width="30%">
          <div>
            <el-form :model="bianjiObj" label-width="70">
              <el-form-item label="分类名称">
                <el-input v-model="bianjiObj.cat_name"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="bianjiVisible = false">取 消</el-button>
            <el-button type="primary" @click="bianjiSure">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  api_categories,
  api_deltype,
  api_uptype,
  api_addtype,
  api_search,
} from "../../api/goods";
export default {
  data() {
    return {
      searchobj: "",
      queryList: {
        type: [1, 2, 3],
        pagenum: "",
        pagesize: "",
      }, //获取表格参数
      tableList: [], //表格参数
      bianjiVisible: false, //编辑弹窗
      bianjiObj: {}, //编辑参数
      addVisible: false, //添加弹窗
      addObj: {
        cat_pid: "",
        cat_name: "",
        cat_level: "",
      },
    };
  },
  mounted() {
    this.query();
  },

  methods: {
    //表格
    async query(a) {
      let rst = await api_categories(this.queryList);
      console.log(rst);
      this.tableList = rst.data;
    },
    //删除
    async del(row) {
      let rst = await api_deltype(row.cat_id);
      console.log(rst);
      if (rst.meta.status == 200) {
        this.$message.success(rst.meta.msg);
        this.query();
      } else {
        this.$message.error(rst.meta.msg);
      }
    },
    //编辑
    bianji(row) {
      this.bianjiVisible = true;
      let { cat_id, cat_name } = row;
      this.bianjiObj = { cat_id, cat_name };
    },
    //编辑确认
    async bianjiSure() {
      this.bianjiVisible = false;
      let { cat_id, cat_name } = this.bianjiObj;
      console.log(cat_id, cat_name);
      let rst = await api_uptype({
        id: cat_id,
        cat_name,
      });
      if (rst.meta.status == 200) {
        this.$message.success(rst.meta.msg);
        this.query();
      } else {
        this.$message.error(rst.meta.msg);
      }
      console.log(rst);
    },
    //添加分类
    addtype() {
      this.addVisible = true;
    },
    async addsure() {
      this.addVisible = false;
      let rst = await api_addtype(this.addObj);
      console.log(rst);
      if (rst.meta.status == 201) {
        this.$message.success(rst.meta.msg);
        this.query();
      } else {
        this.$message.error(rst.meta.msg);
      }
    },
    //搜索
    async selectch() {
      let rst = await api_search({ id: this.searchobj });
      console.log(rst.data);
      console.log(this.tableList);
      this.tableList = [rst.data];
    },
  },
};
</script>

<style lang="less" scoped>
.ce {
  width: 99.9%;
}
</style>